import { useEffect, useState } from "react";
import { Card, Space, Input, Button, Table, Select } from "antd";
import {
  PlusOutlined,
  EditTwoTone,
  DeleteTwoTone,
  ZoomInOutlined,
  RedoOutlined,
} from "@ant-design/icons";
export default function RoleManagement() {
  const maskPassword = (password: string) => {
    if (!password) return "";
    const firstChar = password.charAt(0);
    const lastChar = password.charAt(password.length - 1);
    const maskedPart = "*".repeat(password.length - 2);
    return `${firstChar}${maskedPart}${lastChar}`;
  };
  console.log(maskPassword);
  
  const [open, setOpen] = useState(false);
  console.log(open);
  
  useEffect(() => {
    setx(1000);
  }, []);
  const AddList = () => {
    setOpen(true);
  };
  const [x, setx] = useState(100);
  const x1 = "共有" + x + "条数据";
  const dataSource = [
    {
      key: "1",
      name: "肯德基总店通用模板",
      username: "肯德基总店"
    },
    {
      key: "2",
      name: "麦当劳总店通用模板",
      username: "麦当劳总店",
    },
  ];
  const columns = [
    {
      title: "序号",
      dataIndex: "key",
      key: "key",
    },
    {
      title: "用户姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "登录账号",
      dataIndex: "username",
      key: "username",
    },
    {
      title: "操作",
      key: "key",
      render: (text: any) => (
        <Space>
          <Button id={text} type="link">
            <EditTwoTone />
            编辑
          </Button>
          <Button type="link">
            <DeleteTwoTone />
            删除
          </Button>
        </Space>
      ),
    },
  ];
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  return (
    <div className="mt-10">
      <Card title="打印模板筛选" className="w-[90%] m-auto">
        <div>
          <Space className="mr-10">
            店铺名称：
            <Select
              defaultValue="全部"
              onChange={handleChange}
              style={{ width: 230 }}
              options={[
                { value: "1", label: "全部" },
                { value: "2", label: "上线" },
                { value: "3", label: "未上线" },
                { value: "4", label: "已删除" },
              ]}
            />
          </Space>
          <Space className="ml-10">
            打印模板名称:
            <Input placeholder="请输入" className="mr-10" />
          </Space>
          <Space className="ml-15">
            <Button type="primary">
              <ZoomInOutlined />
              查询
            </Button>
            <Button type="dashed">
              {" "}
              <RedoOutlined />
              重置
            </Button>
          </Space>
        </div>
      </Card>
      <Card
        title={x1}
        className="mt-10 w-[90%] m-auto"
        extra={
          <Button type="primary"
          onClick={() => {
            AddList();
          }}>
            <PlusOutlined />
            添加
          </Button>
        }
      >
        <Table dataSource={dataSource} columns={columns} />;
      </Card>
    </div>
  );
}
